<template>
    <div class="flex justify-around bg-white h-8 p-1">
        <div path="card" @click="handleTabbarItem(0, $event)" class=" flex flex-col items-center gap-1">
            <el-icon :color="which === 0 ? 'blue' : ''"><MapLocation /></el-icon>
           <span class=" text-min-size">打卡</span>
        </div>
        <div path="apply" @click="handleTabbarItem(1, $event)" class=" flex flex-col items-center gap-1">
            <el-icon :color="which === 1 ? 'blue' : ''"><DocumentCopy /></el-icon>
            <span class=" text-min-size">申请</span>
        </div>
        <!-- <div path="message" @click="handleTabbarItem(2, $event)" class=" flex flex-col items-center gap-1">
            <el-icon :color="which === 2 ? 'blue' : ''"><ChatDotSquare /></el-icon>
            <span class=" text-min-size">消息</span>
        </div> -->
        <div path="personal" @click="handleTabbarItem(3, $event)" class=" flex flex-col items-center gap-1">
            <el-icon :color="which === 3 ? 'blue' : ''"><User /></el-icon>
            <span class=" text-min-size">个人</span>
        </div>
    </div>  
    </template>
    
    <script setup lang="ts">
    import { MapLocation, ChatDotSquare, User,DocumentCopy } from '@element-plus/icons-vue'
    import { ref } from 'vue'
    import { useRouter } from 'vue-router'
    const which = ref(0)
    const router = useRouter()
    const handleTabbarItem = (index: number, event: Event) => {
      const path = (event.currentTarget as HTMLElement).getAttribute('path')
      console.log('Clicked path:', path) // 打印 path 值以验证
      which.value = index
      router.push({
        name: path
      })
    }
    </script>

<style>

</style>